<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="box-card">
            <el-tabs tab-position="left" style="width:98%">
              <el-tab-pane
                :label="group.attrGroupName"
                v-for="(group,gidx) in dataResp.attrGroups"
                :key="group.attrGroupId"
              >
                <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  spu.baseAttrs[0] = [{attrId:xx,val:}]-->
                <el-form ref="form" :model="dataResp">
                  <el-form-item
                    :label="attr.attrName"
                    v-for="(attr,aidx) in group.attrs"
                    :key="attr.attrId"
                  >
                    <el-input
                      v-model="dataResp.baseAttrs[gidx][aidx].attrId"
                      type="hidden"
                      v-show="false"
                    ></el-input>
                    <el-select
                      v-model="dataResp.baseAttrs[gidx][aidx].attrValues"
                      :multiple="attr.valueType == 1"
                      filterable
                      allow-create
                      default-first-option
                      placeholder="请选择或输入值"
                    >
                      <el-option
                        v-for="(val,vidx) in attr.valueSelect.split(';')"
                        :key="vidx"
                        :label="val"
                        :value="val"
                      ></el-option>
                    </el-select>
                    <el-checkbox
                      v-model="dataResp.baseAttrs[gidx][aidx].showDesc"
                      :true-label="1"
                      :false-label="0"
                    >快速展示</el-checkbox>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <div style="margin:auto">
              <el-button type="success" style="float:right" @click="submitSpuAttrs">确认修改</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    components: {},
    props: {},
    data() {
      return {
        spuId: "",
        catalogId: "",
        dataResp: {
          //后台返回的所有数据
          attrGroups: [],
          baseAttrs: []
        },
        spuAttrsMap: {}
      };
    },
    computed: {},
    methods: {
      clearData(){
        this.dataResp.attrGroups = [];
        this.dataResp.baseAttrs = [];
        this.spuAttrsMap = {};
      },
      getSpuBaseAttrs() {
        this.$http({
          url: this.$http.adornUrl(`/product/attr/base/listforspu/${this.spuId}`),
          method: "get"
        }).then(({ data }) => {
          data.data.forEach(item => {
            this.spuAttrsMap["" + item.attrId] = item;
          });
          console.log("~~~~", this.spuAttrsMap);
        });
      },
      getQueryParams() {
        this.spuId = this.$route.query.spuId;
        this.catalogId = this.$route.query.catalogId;
        console.log("----", this.spuId, this.catalogId);
      },
      showBaseAttrs() {
        let _this = this;
        this.$http({
          url: this.$http.adornUrl(
            `/product/attrgroup/${this.catalogId}/withattr`
          ),
          method: "get",
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          //先对表单的baseAttrs进行初始化
          data.data.forEach(item => {
            let attrArray = [];
            item.attrs.forEach(attr => {
              let v = "";
              if (_this.spuAttrsMap["" + attr.attrId]) {
                v = _this.spuAttrsMap["" + attr.attrId].attrValue.split(";");
                if (v.length == 1) {
                  v = v[0] + "";
                }
              }
              attrArray.push({
                attrId: attr.attrId,
                attrName: attr.attrName,
                attrValues: v,
                showDesc: _this.spuAttrsMap["" + attr.attrId]
                  ? _this.spuAttrsMap["" + attr.attrId].quickShow
                  : attr.showDesc
              });
            });
            this.dataResp.baseAttrs.push(attrArray);
          });
          this.dataResp.attrGroups = data.data;
        });
      },
      submitSpuAttrs() {
        console.log("·····", this.dataResp.baseAttrs);
        //spu_id  attr_id  attr_name             attr_value             attr_sort  quick_show
        let submitData = [];
        this.dataResp.baseAttrs.forEach(item => {
          item.forEach(attr => {
            let val = "";
            if (attr.attrValues instanceof Array) {
              val = attr.attrValues.join(";");
            } else {
              val = attr.attrValues;
            }
  
            if (val != "") {
              submitData.push({
                attrId: attr.attrId,
                attrName: attr.attrName,
                attrValue: val,
                quickShow: attr.showDesc
              });
            }
          });
        });
  
        this.$confirm("修改商品规格信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl(`/product/attr/update/${this.spuId}`),
              method: "post",
              data: this.$http.adornData(submitData, false)
            }).then(({ data }) => {
              this.$message({
                type: "success",
                message: "属性修改成功!"
              });
            });
          })
          .catch((e) => {
            this.$message({
              type: "info",
              message: "已取消修改"+e
            });
          });
      }
    },
    created() {},
    activated() {
      this.clearData();
      this.getQueryParams();
      if (this.spuId && this.catalogId) {
        this.showBaseAttrs();
        this.getSpuBaseAttrs();
      }
    }
  };
  </script>
  <style scoped>
  </style>